<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<link rel="stylesheet"  type="text/css"  href="bootstrap.css" >
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            background:url(https://img.51miz.com/Element/00/59/33/44/6766b1bb_E593344_6baa5e03.jpg)no-repeat center center;
            height: 100%;
            width: 100%;
            background-size:cover;
            position:absolute;
            left:0;
            top:0
        }
    </style>
</head>
<body>
<div class="container">
        <center>
            <h3>欢迎使用成绩管理系统</h3>
        </center>
        <div>
            <table id="table1" class="table table-hover">

            </table>
        </div>
        <h4>添加学生成绩</h4>
        <div>
            <li>课程</li><span id="kechengSpan"></span><br>
            <li>学生</li><span id="xueshengSpan"></span><br>
            <li>成绩</li><input id="chengji" name="chengji" type="text"><br>
        </div>
        <input type="button" onclick="f1()" value="添加" class="btn btn-primary">
</div>
</body>
</html>
<script>
    function f1(){
        var kechengid = $("#kechengid").val();
        var xueshengid = $("#xueshengid").val();
        var chengji = $("#chengji").val();
        if(kechengid=="" || xueshengid=="" || chengji==""){
            alert("请输入完整信息");
            return;
        }
        $.ajax({
            "url":"/addChengji",
            "data": {
                'kechengid':kechengid,
                'xueshengid':xueshengid,
                'chengji':chengji
            },
            "type":"post",
            "dataType":"text",
            "success":function(json) {
                alert(json);
                show();
            }
        })
    }
    $(function () {
        show();
    })
    function show(){
        showXuesheng();
        showChengji();
        showKecheng();
        show1();
        show2();
        setTimeout(function(){
            console.log('kcjson',kcjson)
            console.log('xsjson',xsjson)
            console.log('cjjson',cjjson)
            doSomething()
        }, 1000);
    }
    function show1(){
        $.ajax({
            url: "findAllKecheng",
            type: "post",
            async: false,
            cache: false,
            dataType: "json",
            "success": function (json) {
                // 创建select元素的HTML字符串
                var selectHTML = "<select id='kechengid' class=\"selectpicker col-md-8\">";
                for(var i=0;i<json.length;i++){
                    var obj = json[i];
                    selectHTML += "<option value='"+obj.id+"'>"+obj.mingcheng+"</option>";
                }
                selectHTML += "</select>";
                $("#kechengSpan").html(selectHTML);
            }
        });
    }
    function show2(){
        $.ajax({
            url: "findAllXueshengjiaoshiByJiaoshiid",
            type: "post",
            async: false,
            cache: false,
            dataType: "json",
            "success": function (json) {
                console.log(json)
                // 创建select元素的HTML字符串
                var selectHTML = "<select id='xueshengid' class=\"selectpicker col-md-8\">";
                for(var i=0;i<json.length;i++){
                    var obj = json[i];
                    selectHTML += "<option value='"+obj.xsid+"'>"+obj.xsxm+"</option>";
                }
                selectHTML += "</select>";
                $("#xueshengSpan").html(selectHTML);
            }
        });
    }
    function doSomething(){
        var var1 = '';
        var1 = var1+'<tr>';
        var1 = var1+'<th>学生姓名</th>';
        for(var i=0;i<kcjson.length;i++){
            var obj = kcjson[i];
            var1 = var1+'<th>'+obj.mingcheng+'</th>';
        }
        var1 = var1+'</tr>';
        for(var j=0;j<xsjson.length;j++){
            var1 = var1+'<tr>';
            var obj = xsjson[j];
            console.log('obj', obj)
            var1 = var1+'<td>'+obj.xsxm+'</td>';
            for(var i=0;i<kcjson.length;i++){
                var chengji = 0;
                var obj1 = kcjson[i];
                console.log('obj1', obj1)
                for(var o=0;o<cjjson.length;o++){
                    var obj2 = cjjson[o];
                    console.log('obj2', obj2)
                    if(obj2.xsid == obj.xsid && obj2.kcid == obj1.id){
                        chengji = obj2.cjcj;
                    }
                }
                var1 = var1+'<td>'+chengji+'</td>';
            }
            var1 = var1+'</tr>';
        }
        $("#table1").html(var1);
    }
    var xsjson = {};
    var kcjson = {};
    var cjjson = {};
    function showKecheng(){
        $.ajax({
            url: "findAllKecheng",
            type: "post",
            async: false,
            cache: false,
            dataType: "json",
            "success": function (json) {
                kcjson = json;
            }
        });
    }
    function showXuesheng(){
        $.ajax({
            url: "findAllXueshengjiaoshiByJiaoshiid",
            type: "post",
            async: false,
            cache: false,
            dataType: "json",
            "success": function (json) {
                xsjson = json;
            }
        });
    }
    function showChengji(){
        $.ajax({
            url: "findAllChengji",
            type: "post",
            async: false,
            cache: false,
            dataType: "json",
            "success": function (json) {
                cjjson = json;
            }
        });
    }
</script>